import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Developer/Server-Side Rendering/Next.js appDir setup" />

## Next.js@>=13 appDir router

For basic instructions on getting Next.js set up, see [Getting Started](https://nextjs.org/docs/getting-started).

1. Get a basic next.js setup running, rendering a page from the `app` folder, as guided by the tutorial.
2. Add the Fluent UI dependencies: `@fluentui/react-components`.
3. Add the SWC plugin to add the client directive for our library: `fluentui-next-appdir-directive`. See
   [the repo](https://github.com/sopranopillow/fluentui-nextjs-appdir-plugin) for more information

```shell
# Using Yarn
yarn add @fluentui/react-components fluentui-next-appdir-directive

# Using NPM
npm install @fluentui/react-components fluentui-next-appdir-directive
```

### Setting up Fluent UI

1. Create a `providers.tsx` file under your `app` folder with the following content:

```tsx
'use client';

import * as React from 'react';
import {
  FluentProvider,
  teamsDarkTheme,
  SSRProvider,
  RendererProvider,
  createDOMRenderer,
  renderToStyleElements,
} from '@fluentui/react-components';
import { useServerInsertedHTML } from 'next/navigation';

export function Providers({ children }: { children: React.ReactNode }) {
  const [renderer] = React.useState(() => createDOMRenderer());
  const didRenderRef = React.useRef(false);

  useServerInsertedHTML(() => {
    if (didRenderRef.current) {
      return;
    }
    didRenderRef.current = true;
    return <>{renderToStyleElements(renderer)}</>;
  });

  return (
    <RendererProvider renderer={renderer}>
      <SSRProvider>
        <FluentProvider theme={teamsDarkTheme}>{children}</FluentProvider>
      </SSRProvider>
    </RendererProvider>
  );
}
```

2. Modify the `layout.tsx` file under your `app` folder to add our providers:

```tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

// 👇 import the providers
import { Providers } from './providers';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {/* 👇 Apply them to children */}
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

3. Add `fluentui-next-appdir-directive` plugin with the paths for `@griffel` and `@fluentui`:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcPlugins: [['fluentui-next-appdir-directive', { paths: ['@griffel', '@fluentui'] }]],
  },
};

module.exports = nextConfig;
```

4. Finally add your code to the `page.tsx` file in your `app` folder:

```tsx
import * as React from 'react';
import { Button } from '@fluentui/react-components';

export default function Home() {
  return <Button>Hello everyone</Button>;
}
```
